<!--
*@Author: QWP
*@Description: 抽屉式展开筛选
*@Date: 2024-09-30 10:03:43
-->
<template>
 <u-drawer v-bind="$attrs"
    placement="right"
    :title="$attrs['title'] || '高级筛选'"
    :maskStyle="{ width: 0  }"
    :width="$attrs['width'] || '400px'"
    :push="{distance: 0}"
    @close="emits('update:open', false)">
    <u-form
      :model="value"
      :gutter="16"
      :elements="formEls"
      :isSearch="true"
      @formChange="emits('change')"
      class="f-w-auto">
    </u-form>
    <template #footer>
      <a-row justify="end">
        <u-icon-button itype="close" @click="emits('update:open', false)">关闭</u-icon-button>
      </a-row>
    </template>
  </u-drawer>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-drawer-search'
})
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps<{
  elements: any[],
  value: any
}>()

const emits = defineEmits(['update:value', 'update:open', 'change'])

const formEls = computed(() => {
  let els = props.elements || [];
  let t = els.map(i => {
    if(!i['col']) i['col'] = {}
    i['col'].span = 24
    return i
  })
  return t
})
</script>

<style lang='scss' scoped>
</style>